<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button @click="$router.push('/search')" icon="search" round>搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- 频道栏 -->
    <!-- v-model双向绑定的是选中的频道下标 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
        <article-list :channel_id="item.id" />
      </van-tab>
    </van-tabs>

    <!-- 图标 -->
    <div class="icon-box" @click="channelShow = true">
      <van-icon name="wap-nav" size="30" />
    </div>

    <!-- 频道管理的sheet -->
    <van-action-sheet v-model="channelShow" title="频道管理">
      <!--
        $event在原生标签里代表事件对象
        $event在组件上代表组件传递过来的值
         :value="active"
         @input="active = $event"
            可以替换成 v-model="active"

        v-model是一个语法糖
          它用在组件时，会生成:value和@input

        例如
          v-model="active"
          它就会生成 :value="active" 以及 @input="active = $event"
       -->
      <channel-edit
        :ownList="ownList"
        :allList="allList"
        @add="ownList.push($event)"
        @del="ownList = ownList.filter(v => v.id != $event.id)"
        @update:channelShow="channelShow = $event"
        :value="active"
        @input="active = $event"
      />
    </van-action-sheet>
  </div>
</template>

<script>
// 导入接口
import { ownListAPI, allListAPI, resetChannelAPI } from '@/api/channel'
// 导入组件
import ArticleList from './ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  name: 'MyHome',
  components: {
    ArticleList,
    ChannelEdit
  },
  destroyed () {
    console.log('home销毁了')
  },
  data () {
    return {
      active: 0,
      ownList: [],
      allList: [],
      channelShow: false,
      isFirst: true
    }
  },
  watch: {
    async ownList () {
      // 防止第一次页面一打开时就发请求
      if (this.isFirst) {
        this.isFirst = false
        return
      }
      // 要判断有没有登录
      if (this.$store.state.user.tokenObj.token) {
        console.log('即将发请求')
        // 发请求-存到服务器
        // 应该用ownList产生一个新数组，新数组的长度跟ownList是一样
        // 只不过新数组只要id和seq属性,可以用map方法
        const channels = this.ownList.map((v, i) => {
          return {
            id: v.id,
            seq: i
          }
        })
        await resetChannelAPI({
          channels
        })
      } else {
        // 没登录-存到本地
        localStorage.setItem('hmtt95-channels', JSON.stringify(this.ownList))
      }
    }
  },
  async created () {
    // 登录了，发请求
    /*
    if (this.$store.state.user.tokenObj.token) {
      const res1 = await ownListAPI()
      this.ownList = res1.data.channels
    } else {
      // 代表没登录
      const local = JSON.parse(localStorage.getItem('hmtt95-channels'))
      if (local) {
        this.ownList = local
      } else {
        // 代表没登录也没本地存储，所以发请求
        const res1 = await ownListAPI()
        this.ownList = res1.data.channels
      }
    }
    */

    // 要么有token，要么没有本地存储的数据都要发请求
    const token = this.$store.state.user.tokenObj.token
    const local = JSON.parse(localStorage.getItem('hmtt95-channels'))
    if (token || !local) {
      const res1 = await ownListAPI()
      this.ownList = res1.data.channels
    } else {
      this.ownList = local
    }

    // 获取所有频道
    const res2 = await allListAPI()
    this.allList = res2.data.channels
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  .logo {
    width: 120px;
    height: 100%;
    background: url(@/assets/logo.png) no-repeat center / contain;
  }

  .van-button {
    width: 100px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    .van-icon-search,
    .van-button__text {
      color: #fff;
    }
  }
}

::v-deep .van-tabs__nav {
  padding-right: 30px !important;
}

.icon-box {
  position: absolute;
  right: 0;
  top: 50px;
  background-color: #fff;
}
</style>
